<template>
	<view class="page_header" :style="'padding-top:' + demo.top + 'px;padding-bottom:10rpx'" >
		
		<view class="header" v-if="showhead">
			
			<view v-if="headimg">
				
			
			
			<image :src="headimg" mode="widthFix" class="headimg" :style="'width:' +  demo.height + 'px;'" @click="navTo"></image>
			
			</view>
			
			<view v-else>
			 <image src="/static/logo.png" mode="widthFix" class="headimg" :style="'width:' +  demo.height + 'px;'" @click="navTo"></image> 
			
				
				
			</view>
			
		
			
			
		</view>
		
		
		<view class="searchb" :style="'height:' +  demo.height + 'px;'">
			<view class="search" :style="{ backgroundColor: backgroundColor }">
				<view class="content" :style="{ 'border-radius': radius + 'px', border: border }">
					<view class="content-box" :class="{ center: mode === 2 }">
						<text class="icon icon-search" >&#xe61c;</text>
						<input class="input" :class="{ center: !active && mode === 2 }" :focus="isFocus" :placeholder="placeholder" v-model="inputVal" @focus="focus" @blur="blur" />
						<!-- <view v-if="!active && mode === 2" class="input sub" @click="getFocus">请输入搜索内容</view> -->
						<text v-if="isDelShow" class="icon icon-del" @click="clear">&#xe644;</text>
					</view>
					<view v-show="(active && show && button === 'inside') || (isDelShow && button === 'inside')" class="searchBtn" @click="search">搜索</view>
				</view>
				<view v-if="button === 'outside'" class="button" :class="{ active: show || active }" @click="search">
					<view class="button-item">{{ !show ? searchName : '搜索' }}</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {


	props: {
		showhead: {
			type: Boolean,
			default: true
		},
		mode: {
			type: Number,
			default: 1
		},
		button: {
			type: String,
			default: 'outside'
		},
		show: {
			type: Boolean,
			default: true
		},
		radius: {
			type: String,
			default: '60'
		},
		placeholder: {
			type: String,
			default: '搜索'
		},
		backgroundColor: {
			type: String,
			default: ''
		},
		border: { type: String, default: '1px #fbebeb solid' }
		
	},
	data() {
		return {
			openid:uni.getStorageSync('userInfo').openid,
			headimg: uni.getStorageSync('userInfo').avatarUrl,
			active: false,
			inputVal: '',
			searchName: '取消',
			isDelShow: false,
			isFocus: false,
			 demo: {
			    top: 26,
			    height: 32
			}
		};
	},
	onShow() {
		this.openid=uni.getStorageSync('userInfo').openid;
		this.headimg=uni.getStorageSync('userInfo').avatarUrl;
	},
	created () {
		
	            const demo = uni.getMenuButtonBoundingClientRect()
	            this.demo.top = demo.top
	            this.demo.height = demo.height
				console.log(this.demo);
	},
	methods: {
			
		focus() {
			console.log("sss");
			//this.active = true;
			uni.navigateTo({
				url:'/pages/HM-search/HM-search'
			})
		},
		blur() {
			this.isFocus = false;
			if (!this.inputVal) {
				this.active = false;
			}
		},
		clear() {
			this.inputVal = '';
			this.active = false;
			this.$emit('search', '');
		},
		getFocus() {
			this.isFocus = true;
		},
		search() {
			if (!this.inputVal) return;
			console.log(this.inputVal);
			this.$emit('search', this.inputVal);
		},
		navTo(){
			console.log('登陆');
			uni.switchTab({
				url:'/pages/member/member'
			})
		}
		
	},
	watch: {
		inputVal(newVal) {
			
			
			if (newVal) {
				this.searchName = '搜索';
				this.isDelShow = true;
			} else {
				this.searchName = '取消';
				this.isDelShow = false;
			}
		}
	}

	}
</script>

<style lang="scss" scoped>
	.searchb{
		flex: 6.5;
		margin-left: 20upx;
		margin-right: 40upx;
	}
	.header{
		flex: 0.5;
		margin-left: 20upx;
	}
	.headimg{
		border-radius: 50%;
	}
		
	.page_header {
		display: flex;
		background-color: #d33d3e;
		position: sticky;
		width: 100%;
		left: 0;
		right: 0;
		top: 0;//适配其他平台
		z-index: 99;
	}
.search {
	display: flex;
	float: left;
	width: 70%;
	box-sizing: border-box;
	font-size: $uni-font-size-base;
	.content {
		display: flex;
		align-items: center;
		width: 100%;
		background: #fbebeb;
		overflow: hidden;
		transition: all 0.2s linear;
		border-radius: 30px;
		.content-box {
			width: 100%;
			display: flex;
			align-items: center;
			&.center {
				justify-content: center;
			}
			.icon {
				padding: 0 15upx;
				&.icon-del {
					font-size: 38upx;
				}
			}
			.input {
				width: 100%;
				max-width: 100%;
				
				transition: all 0.2s linear;
				&.center {
					width: 200upx;
				}
				&.sub {
					// position: absolute;
					width: auto;
					color: grey;
				}
			}
		}
		.searchBtn {
			height: 100%;
			flex-shrink: 0;
			padding: 0 30upx;
			background: $uni-color-success;
			line-height: 60upx;
			color: #fff;
			border-left: 1px #ccc solid;
			transition: all 0.3s;
		}
	}

	.button {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		flex-shrink: 0;
		width: 0;
		transition: all 0.2s linear;
		white-space: nowrap;
		overflow: hidden;
		&.active {
			padding-left: 15upx;
			width: 100upx;
		}
	}
}
@font-face {
	font-family: 'iconfont';
	src: url('https://at.alicdn.com/t/font_989023_efq0mtli526.ttf') format('truetype');
}
.icon {
	font-family: iconfont;
	font-size: 32upx;
	font-style: normal;
	color: #c1bec3;
}
</style>
